<template>
  <div style="margin-right: -10px">
    <div>
      <span>退款编号：{{ order.refund_sn }}</span>
      <span style="margin:0 40px">
        <span>退款金额：</span>
        <span style="margin-left:4px;color: #FA5151">{{ order.refund_amount }}</span>
      </span>
      <span>退款原因：</span>
      <span style="color: #FA5151;margin-right: 40px">{{ order.reason }}</span>
<!--      <el-tag size="mini" type="primary" v-if="order.audit_status == 1">待审核</el-tag>-->
<!--      <el-tag size="mini" type="success" v-if="order.audit_status == 2">已通过</el-tag>-->
<!--      <el-tag size="mini" type="danger" v-if="order.audit_status == 3">已拒绝</el-tag>-->
    </div>
    <table class="order" cellspacing="0" style="width: 100%;">
      <tr v-for="(goods, index) in rows" :key="index" style="background: inherit">
        <td style="width: 100%">
          <div style="float:left;width:80px;height:80px;background: #0c5460">
            <el-image :src="goods.goods_image"></el-image>
          </div>
          <div style="padding:0 50px 0 100px;line-height: 1.5">
            <p><span>{{ goods.goods_name }}</span></p>
            <p><span style="color: #909399">{{ goods.goods_sku_text }}</span></p>
<!--            <p>-->
<!--              <span>¥{{ goods.goods_price }}</span>-->
<!--              <span style="margin-left: 20px">数量：{{ goods.goods_number }}</span>-->
<!--            </p>-->
          </div>
        </td>
        <td style="vertical-align: top;text-align: center;">
          <p class="cell" style="width: 120px;">¥{{ goods.goods_price }}</p>
          <p class="cell" style="width: 120px;font-size: 12px" v-if="goods.integral">（积分:{{ goods.integral }}）</p>
        </td>

        <td style="vertical-align: top;text-align: center;">
          <p class="cell" style="width: 120px;">{{ goods.goods_number }}</p>
        </td>
      </tr>
    </table>

  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
  },

  computed: {
    order() {
      return this.item.basic.data.field || {}
    },

    rows() {
      return this.item.goods.data.list || []
    },

    user() {
      return (this.item.user && this.item.user.data.field) || {}
    }
  },

  methods: {
    showUser(data) {
      this.$emit('show-user', data)
    },

    showDetail(data) {
      this.$emit('show-detail', data.order_sn)
    }
  }
})
</script>
<style>
.el-table .order td {
  border-bottom: 0
}
</style>
